import '../scss/App.scss'
import { CarryOutOutlined, CheckOutlined, FormOutlined, StarOutlined } from '@ant-design/icons';
import { Select, Switch, Tree } from 'antd';
import React, { useState, useEffect } from 'react';
import { TodoListO, Replay } from '@react-vant/icons';
import summery from '../axiosAPI/yg'
import { Pagination } from 'antd';
function Show() {
    useEffect(() => {
        getinfo()
    }, [])
    const [showLine, setShowLine] = useState(true);
    const [showIcon, setShowIcon] = useState(false);
    const [showLeafIcon, setShowLeafIcon] = useState(true);
    const [name,setname] = useState('')
    const [tid,settid] = useState("")
    const [sex,setsex] = useState('')
    const [list, setlist] = useState([])
    const [clazz, setclazz] = useState([])
    const [student, setstudent] = useState([])
    const [sid, setsid] = useState('undefined')
    const [result, setresult] = useState([])
    const [total, settotal] = useState(0)
    const [page,setpage] = useState(1) 
    const [pageSize,setpageSize] = useState(15)
    let getinfo = async (page,pageSize) => {
        let res = await summery.getstate()
        let clazzs = await summery.getclass()
        let studen = await summery.getstudent(page,pageSize,name,tid,sex)
        let result = await summery.getruslt()
        setlist(res)
        setclazz(clazzs)
        setstudent(studen.data)
        setresult(result)
        settotal(studen.total)
        console.log(studen);
        

    }
    let gentate = (listcate, less) => {
        return listcate.map(item => ({
            title: item.name,
            key: item._id,
            icon: <FormOutlined />,
            children: less.filter(ele => ele._id === item.class)
                .map(ele => ({
                    title: ele.name,
                    key: ele._id,
                    icon: <StarOutlined />
                }))
        }))
    }
    const treeData = [
        {
            title: '培训学校',
            key: '0-0',
            icon: <CarryOutOutlined />,
            children: gentate(list, clazz)
        },
    ];
    const onSelect = (selectedKeys) => {
        if (selectedKeys.length > 0) {
            // A node is selected, set the sid
            setsid(selectedKeys[0]);
        } else {
            // No node is selected, retain the current sid (or set it to a default value if needed)
            setsid('undefined');
        }
    };
    let getStudentGrade = (id) => {
        const results = result.find(result => result.student === id);
        return results ? results.grade : '无成绩';
    }
    const handlePageChange = (page, size) => {
        setpage(page);
        setpageSize(size);
        getinfo(page, size);  // 每次分页更改时重新获取数据
    };
    const defaultExpandedKeys = ['0-0', ...clazz.map(c => c._id)];
    return (
        <div id="Show">
            <aside>
                <div>
                    <Tree
                        showLine={
                            showLine
                                ? {
                                    showLeafIcon,
                                }
                                : false
                        }
                        showIcon={showIcon}
                        defaultExpandedKeys={defaultExpandedKeys}
                        onSelect={onSelect}
                        treeData={treeData}
                    />
                </div>
            </aside>
            <main>
                <nav>
                    <div className='left'>
                        <input className='inp' type="text" placeholder='请输入姓名' value={name} onChange={(e)=>{setname(e.target.value)}}/>
                        <input className='inp' type="text" placeholder='学号' value={tid} onChange={(e)=>{settid(e.target.value)}}/>
                    </div>
                    <div className='right'>
                        <input type="radio" name="a" value="true" onChange={()=>{setsex('true')}}/>男
                        <input style={{ marginLeft: "10px" }} type="radio" name="a" value="false" onChange={()=>{setsex('false')}}/>女
                        <button className='search' onClick={()=>{getinfo(page,pageSize)}}><TodoListO fontSize={14} />查询</button>
                        <button className='reset'><Replay fontSize={14} onClick={()=>{
                            setname('')
                            settid('')
                            setsex('')
                            getinfo(page,pageSize)
                        }}/>重置</button>
                    </div>
                </nav>
                <div className='content'>
                    <table border={1} cellSpacing={0} style={{ width: '100%' }}>
                        <thead>
                            <tr style={{ height: "30px", backgroundColor: "#F6F9FF" }}>
                                <th>
                                    学生姓名
                                </th>
                                <th>性别</th>
                                <th>班级</th>
                                <th>考试成绩</th>
                            </tr>
                        </thead>
                        <tbody>
                            {sid === 'undefined' ?
                                <>
                                    {
                                        student.map(item => (
                                            <tr key={item._id} style={{ textAlign: "center" }}>
                                                <td>{item.name}</td>
                                                <td>{item.sex ? '男' : '女'}</td>
                                                <td>{item.clazz.name}</td>
                                                <td>{getStudentGrade(item._id)}</td>
                                            </tr>
                                        ))
                                    }
                                </> :
                                <>
                                    {student.filter(ele => ele.clazz._id === sid).map(item => (
                                        <tr key={item._id} style={{ textAlign: "center" }}>
                                            <td>{item.name}</td>
                                            <td>{item.sex ? '男' : '女'}</td>
                                            <td>{item.clazz.name}</td>
                                            <td>{getStudentGrade(item._id)}</td>
                                        </tr>
                                    ))}
                                </>}
                        </tbody>
                    </table>
                    <Pagination
                        total={total}
                        pageSize={pageSize}
                        current={page}
                        onChange={handlePageChange}
                        showSizeChanger
                        showQuickJumper
                        showTotal={(total) => `共 ${total} 条`}
                    />
                </div>

            </main>
        </div>
    )
}

export default Show